<template>
  <div
    class="backToTop"
    v-if="oItem"
    :style="{
      width: oItem.main.backTopSize + 'px',
      height: (oItem.main.backTopSize+10) + 'px',
    }"
  >
    <div
      class="content"
      v-if="oItem.main.displayType == 'icon'"
      :style="{
        width: oItem.main.backTopSize + 'px',
        height: oItem.main.backTopSize + 'px',
        backgroundColor: make16to10(oItem.main.backTopIconBgColor),
      }"
    >
      <i
        :class="oItem.main.backTopIcon"
        :style="{
          color: oItem.main.backTopIconColor||'transparent',
          fontSize: parseInt(oItem.main.backTopSize / 2) + 'px',
        }"
      ></i>
    </div>

    <div
      class="content"
      v-if="oItem.main.displayType == 'img'"
      :style="{
        width: oItem.main.backTopSize + 'px',
        height: oItem.main.backTopSize + 'px',
      }"
    >
      <img
        :src="oItem.main.backTopImage"
        :style="{
          width: oItem.main.backTopSize + 'px',
          height: oItem.main.backTopSize + 'px',
        }"
        alt=""
      />
    </div>
  </div>
</template>
<script>
import Bus from "@/utils/bus";
import { mapState } from "vuex";
export default {
  name: "backToTop",
  data() {
    return {
      oItem: null,
    };
  },
  created() {},
  props: ["item", "ename", "id"],
  components: {},
  mounted() {
    this.$nextTick(() => {
      this.init();
    });
    const emitName = this.ename + this.id;
    Bus.$off(emitName);
    Bus.$on(emitName, (control) => {
      //console.log("backTopComponent被通知更新");
      this.oItem = null;
      this.$nextTick(() => {
        this.oItem = JSON.parse(control);
      });
    });
  },
  methods: {
    //页面初始化
    init() {
      this.oItem = null;
      this.oItem = JSON.parse(JSON.stringify(this.item));
    },
    //点击 选中当前返回顶部弹窗
    chooseThisControl() {
      this.$parent.chooseThisControl(this.controlsIndex);
    },
    //删除当前组件
    delControl() {
      this.$parent.delControl(this.controlsIndex);
      // this.$parent.backTopControlIndex = null;
      // this.oItem = null;
    },
    //将16进制的颜色值转换为10进制
    make16to10(color) {
      if (!color) {
        return "transparent";
      }
      let v = color.substr(1);
      let a = v.split("");
      let v1 = 0,
        v2 = 0,
        v3 = 0;
      //若第一个字符和第二个字符相同

      v1 = this.computeHandle(a[0]);
      v1 += this.computeHandle(a[1], 0);

      v2 = this.computeHandle(a[2]);
      v2 += this.computeHandle(a[3], 0);

      v3 = this.computeHandle(a[4]);
      v3 += this.computeHandle(a[5], 0);

      return `rgba(${v1},${v2},${v3},${
        (100 - this.oItem.main.backTopIconBgOpacity) / 100
      })`;
    },
    //计算
    computeHandle(a, t) {
      let x = { A: 10, B: 11, C: 12, D: 13, E: 14, F: 15 },
        y = "A,B,C,D,E,F",
        v = 0;
      if (t === 0) {
        if (y.indexOf(a) > -1) {
          v = x[a];
        } else {
          //否则直接乘以16带入计算
          v = parseInt(a);
        }
      } else {
        //若字符大于9，则应为英文字母
        if (y.indexOf(a) > -1) {
          v = x[a] * 16;
        } else {
          //否则直接乘以16带入计算
          v = parseInt(a) * 16;
        }
      }

      return v;
    },
  },
  computed: mapState(["decorate"]),
  watch: {},
};
</script>
<style scoped lang="scss">
.backToTop {
  display: inline-block;
  padding: 5px;
  box-sizing: border-box;
  .content {
    width: 100%;
    display: flex;
    border-radius: 100%;
    height: 100%;
    i {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
    }
  }
}
</style>